<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="viewBlock"></div>

<script id="viewTemplate" type="text/html"></script>
<div>
    <div class="apiType"></div>
</div>
<style>
    .apiType {
        font-size: 48px;
    }

    .api {

    }

    .name {
        font-size: 36px;
        text-indent: 2em;
    }

    .apiName {
        font-size: 24px;
        text-indent: 5em;
    }

    .inputParameter {
    }

    .outputParameter {
        font-size: 24px;
        text-indent: 5em;

    }

    .apiDescribe {
        font-size: 24px;
        text-indent: 5em;
    }

    .parameterDescribe {
        font-size: 18px;
        text-indent: 10em;
    }

    .demo {
        font-size: 18px;
        text-indent: 10em;
    }
</style>
<script>
    let xml = new XMLHttpRequest();
    let url = "./engineApi.json";
    xml.open("get", url);
    xml.onload = function (data) {
        let apis = JSON.parse(data.target.response);
        // let template = document.getElementById("viewTemplate").nextElementSibling;
        let parent = document.getElementById("viewBlock");

        apis.forEach(api => {
            createDome(api, parent)
        })
    };
    xml.send();

    function createDome(api, parent) {
        var translate = {
            name: "接口名称>>>",
            apiName: "接口示例---",
            parameterDescribe: "参数描述|||",
            demo: "参数示例|||",
            outputParameter: "接口返回---",
            apiDescribe: "接口描述---"
        };

        // let divs = template.getElementsByTagName("div");
        function createDiv(clazz, parent) {
            let htmlElement = document.createElement("div");
            htmlElement.className = clazz;
            parent.appendChild(htmlElement);
            return htmlElement;
        }

        for (var k in api) {
            let dom = createDiv(k, parent);
            if (api[k] instanceof Array) {
                api[k].forEach(v => {
                    createDome(v, dom);
                })
            } else {
                let prefix = translate[k] ? translate[k] : "";
                dom.innerHTML = prefix + api[k];
            }
        }

    }
</script>

</body>
</html>